<template>
    <NuxtLayout name="default">
        <div
            v-if="userStore.isLogin"
            class="flex items-center justify-between mb-4"
        >
            <tabs-pane :list="categoryList" :index="tabIndex" />
            <div class="flex items-center">
                <div class="w-[140px] mr-3">
                    <el-select
                        v-model="owner"
                        placeholder="全部"
                        @change="changeOwner"
                    >
                        <el-option value="" label="全部"/>
                        <el-option value="private" label="私有"/>
                        <el-option value="cooperate" label="协作"/>
                    </el-select>
                </div>
                <div class="w-[240px]">
                    <el-input
                        v-model="keyword"
                        class=" h-[40px]"
                        size="large"
                        placeholder="搜索"
                        :prefix-icon="Search"
                        @input="handleRefresh"
                    />
                </div>
                <el-button
                    class="ml-3 h-9"
                    type="primary"
                    :icon="Plus"
                    @click="handleShowCreate"
                >创建</el-button>
            </div>
        </div>

        <div
            v-if="!userStore.isLogin"
            class="flex items-center justify-center h-full"
        >
            <el-empty class="!py-0" description="请登录后再查看" />
        </div>

        <NuxtPage
            v-if="!firstLoading"
            :owner="owner"
            :keyword="keyword"
            :refresh="refresh"
            @complete="refresh = false"
        />

        <popup-add-robot
            v-if="popupType === 'robot'"
            ref="robotRef"
            @close="popupType = ''"
            @confirm="handleRefresh"
        />

        <popup-add-know
            v-if="popupType === 'know'"
            ref="knowRef"
            @close="popupType = ''"
            @confirm="handleRefresh"
        />

        <popup-add-mcp
            v-if="popupType === 'mcp'"
            ref="mcpRef"
            @close="popupType = ''"
            @confirm="handleRefresh"
        />
    </NuxtLayout>
</template>

<script setup lang="ts">
import { throttle } from 'lodash-es'
import { Search, Plus } from '@element-plus/icons-vue'
import useUserStore from '~/stores/user'
import PopupAddMcp from './_components/popup-add-mcp.vue'
import PopupAddKnow from './_components/popup-add-know.vue'
import PopupAddRobot from './_components/popup-add-robot.vue'

const userStore = useUserStore()

// 首次加载
const firstLoading = ref(true)

// 弹窗类型
const popupType = ref<string>('')
const robotRef = shallowRef<InstanceType<typeof PopupAddRobot>>()
const knowRef = shallowRef<InstanceType<typeof PopupAddKnow>>()
const mcpRef = shallowRef<InstanceType<typeof PopupAddMcp>>()

// 列表参数
const refresh = ref(false)
const keyword = ref('')
const owner = ref('')

// 分类选项
const categoryList = [
    {name: '智能体', path: '/agent/robot'},
    {name: '知识库', path: '/agent/know'},
    {name: 'MCP工具', path: '/agent/mcp'}
]

// 当前下标
const route = useRoute()
const tabIndex = computed(() => categoryList.findIndex((nav) => {
    const routePath = route.path === '/'
        ? route.path
        : route.path.replace(/\/$/, '')
    return routePath.startsWith(nav.path)
}))

// 处理刷新
const handleRefresh = throttle(async () => {
    refresh.value = true
}, 600)

/**
 * 权限变动
 */
const changeOwner = (e: string) => {
    owner.value = String(e)
}

/**
 * 创建窗口
 */
const handleShowCreate = async () => {
    if (tabIndex.value === 0) {
        popupType.value = 'robot'
        await nextTick()
        robotRef.value?.open()
    } else if (tabIndex.value === 1) {
        popupType.value = 'know'
        await nextTick()
        knowRef.value?.open()
    } else {
        popupType.value = 'mcp'
        await nextTick()
        mcpRef.value?.open()
    }
}

onMounted(() => {
    setTimeout(() => {
        firstLoading.value = false
    })
})
</script>
